<template>
  <el-dialog v-model="model" @close="closedDialog">
    <el-form
      ref="procInstFormRef"
      :model="procInstFrom"
      label-width="100px"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题名称" prop="procInstName">
            <el-input
              v-model="procInstFrom.procInstName"
              placeholder="标题名称"
              maxlength="120"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="业务Key" prop="businessKey">
            <el-input
              v-model="procInstFrom.businessKey"
              placeholder="业务Key"
              maxlength="36"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closedDialog">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" @click="submitForm">
          {{ $t("common.confirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, type PropType, reactive } from "vue";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";
import { type StartProcInstReq } from "@/api/flow/task/types";
import { taskApi } from "@/api/flow/task/index";
import { Int32Any } from "@/util/protobuf";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const procInstFormRef = ref<FormInstance>();
const procInstFrom = ref<StartProcInstReq>({
  requestId: Math.random() * 10 + "",
  procDefKey: "holidayRequest",
  vars: {},
});

const rules = reactive<FormRules<StartProcInstReq>>({
  procInstName: [
    {
      required: true,
      message: "请输入标题名称",
      trigger: "change",
    },
  ],
});

// 提交表单校验
const submitForm = async () => {
  await procInstFormRef.value?.validate((valid) => {
    if (valid) {
      //更新值.
      procInstFrom.value.vars["days"] = new Int32Any(10);

      taskApi.startProcInst(procInstFrom.value).then((res) => {
        if (res.status === 200) {
          ElMessage({
            message: t("common.submitSuccess"),
            type: "success",
          });
          closedDialog();
        }
      });
    }
  });
};

const model = defineModel<boolean>();
// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value = false;
  }
}
</script>
